<div data-ng-controller="UserCtrl">
	<div class="page-header">
		<h3>
			Users
			<button type="button" class="btn btn-default" ng-click="gotoUserPage()">
				<i class="fa fa-plus"> Add</i>
			</button>
		</h3>
	</div>
	<div ng-show="error" class="alert alert-danger" role="alert">
		<strong>Error!</strong> {{error}}
	</div>
	<table class="table table-hover">
		<thead>
			<tr>
				<th><i class="fa fa-user"></i> User Name</th>
				<th>Roles</th>
				<th>Active</th>
			</tr>
		</thead>
		<tbody>
			<tr dir-paginate="user in users  | itemsPerPage: usersPerPage"
				total-items="totalUsers" current-page="pagination.current" ng-dblclick="gotoUserPage(user)">
				<td>{{user.username}}</td>
				<td>
				<span ng-repeat="role in user.roles">{{role}}<span ng-if="!$last">, </span></span>
				</td>
				<td>
					<a ng-click="disableUser(user)" title="Click to disable user"><i ng-if="user.enabled == true" class="fa fa-lg fa-toggle-on"></i></a>
					<a ng-click="enableUser(user)" title="Click to enable user"><i ng-if="user.enabled != true" class="fa fa-lg fa-toggle-off"></i></a>
				</td>
			</tr>
		</tbody>
	</table>
	<dir-pagination-controls on-page-change="pageChanged(newPageNumber)"></dir-pagination-controls>
</div>